<template>
	<view>
		<view class="new-product">
			<view class="product-title">
				<view class="title">
					<image src="/static/hr_ico.png"></image>
					<text>今日上新</text>
				</view>
				<view class="describe">
					<text>今日上新商品是否有你心仪礼物</text>
				</view>
			</view>
			<view class="goods-list">
				<view class="list" @click="onSkip('goods')" v-for="(item, index) in newGoods" :key="index">
					<view class="pictrue">
						<image :src="item.image"></image>
					</view>
					<view class="price" @click="onSkip('goods')">
						<text class="selling-price">￥{{item.price}}</text>
						<text class="original-price">￥{{item.mktprice}}</text>
					</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
	export default {
		name: 'new-product',
		components: {},
		data() {
			return {

			}
		},
		props: {
			newGoods:{
				type: Array,
				default: () => []
			}
		},
		computed: {

		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.new-product{
		border-top: 16rpx solid #f9f9f9;
		padding: 0 25rpx;
		height: 350rpx;
		.product-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100rpx;
			.title{
				display: flex;
				align-items: center;
				image{
					width: 24rpx;
					height: 32rpx;
				}
				text{
					font-size: 30rpx;
					color: #4c4b4b;
					margin-left: 20rpx;
				}
			}
			.describe{
				display: flex;
				align-items: center;
				text{
					font-size: 26rpx;
					color: #a09f9f;
				}
			}
		}
		.goods-list{
			white-space:nowrap;
			width: 100%;
			height: 220rpx;
			overflow-y: hidden;
			overflow-x: auto;
			.list{
				display:inline-block;
				width: 25%;
				height: 100%;
				margin-right: 20rpx;
				.pictrue{
					width: 100%;
					height: 70%;
					image{
						width: 150rpx;
						height: 150rpx;
					}
				}
				.price{
					display: flex;
					// align-items: center;
					flex-direction: column;
					width: 100%;
					height: 30%;
					.selling-price{
						font-size: 28rpx;
						font-weight: bold;
						color: $price-clor;
					}
					.original-price{
						font-size: 24rpx;
						text-decoration: line-through;
						color: #bbbaba;
						// margin-left: 10rpx;
					}
				}
			}
		}
		
	}	
</style>
